<template>
  <div>
    <div>
      <label>份数:</label>
      <input type="number" v-model="division" @change="createRays" />
    </div>

    <div v-for="(ray, index) in rays" :key="index">
      <div v-for="(point, pointIndex) in ray.points" :key="pointIndex">
        <input
          type="text"
          v-model="point.value"
          @change="validateFraction(ray, point)"
        />
      </div>
    </div>

    <div>
      <label>比较分数:</label>
      <input
        type="text"
        v-model="comparisonFraction"
        @change="compareFractions"
      />
    </div>

    <div>
      <button @click="showSameFractions">相等的分数</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
    import { reactive, ref } from 'vue'

  interface Point {
    value: string;
  }

  interface Ray {
    points: Point[];
  }
  const division = ref(2)
  const rays = reactive([])
const comparisonFraction = ref('')
const sameFractions = reactive([])

    function  createRays() {
        
        for (let i = 0; i < division.value; i++) {
          const points: Point[] = [];
          for (let j = 0; j < this.division; j++) {
            points.push({ value: '' });
          }
          this.rays.push({ points });
        }
      },
      function validateFraction(ray: Ray, point: Point) {
        // 实现验证分数的逻辑，判断输入是否合法
        const fractionRegex = /^\d+\/\d+$/; // 假设输入格式为“数字/数字”

        if (!fractionRegex.test(point.value)) {
        // 如果输入不匹配预期的格式，可以进行错误处理
        console.log('请输入正确格式的分数（如：1/2）');
        } else {
        // 分数格式正确，可以进行后续操作
        console.log('分数格式正确');
        }
      },
      function compareFractions() {
        // 实现比较分数的逻辑
        // 假设需要比较两个分数的大小，根据实际情况编写比较逻辑
      const fraction1 = this.rays[0].points[0].value; // 示例中假设比较第一个射线的第一个点的分数
      const fraction2 = this.rays[1].points[0].value; // 示例中假设比较第二个射线的第一个点的分数

      if (fraction1 === fraction2) {
        console.log('两个分数相等');
      } else {
        console.log('两个分数不相等');
      }
      },
      function  showSameFractions() {
        // 根据相同分数的逻辑显示相同的色条
        const selectedFraction = this.comparisonFraction; // 示例中假设通过输入框选择分数进行比较

        // 在所有的射线中查找相同的分数
        this.sameFractions = [];
        for (const ray of this.rays) {
        for (const point of ray.points) {
            if (point.value === selectedFraction) {
            this.sameFractions.push(point.value);
            }
        }
        }

        console.log('相同的分数：', this.sameFractions);
      },
    },
  }
    // data() {
    //   return {
    //     division: 2,
    //     rays: [] as Ray[],
    //     comparisonFraction: '',
    //     sameFractions: [] as string[],
    //   };
    // },
</script>
